<template>
	<view>
		<view class="top">
			<statusBar></statusBar>
			<view class="head" >
				<image @tap="backone" src="/static/img/back-icon-white.png" class="back-icon"></image>
				<text>{{lang.RealNameAuthentication}}</text>
				<text></text>
			</view>		
		</view>
		
		
		<!-- 认证 -->
        <!-- 0：审核中 1：审核通过，2：已拒绝（拒绝理由） -->
		<view  style="padding: 0upx;" class="certification-list">
			<swiper class="swiper" :current="current" :indicator-dots="indicatorDots" :autoplay="autoplay" :style="{height:swierHeight+'px'}" :interval="interval"
			 :duration="duration">		
				<!-- 身份证照片上传 -->
				
				
				<swiper-item>
					<view class="swiper-itemId">
						<view>{{lang.identity}}</view>
						<!-- 状态 -->
						<view v-if="userinfo.Customer.rztype==0">
							 <text style="text-align: center;display: flex;align-items: center;justify-content: center;color: red;">未认证</text>
						</view>
						<view v-else-if="userinfo.Customer.rztype==1">
							 <text style="text-align: center;display: flex;align-items: center;justify-content: center;color: red;">认证中</text>
						</view>
						<view v-else>
							 <text style="text-align: center;display: flex;align-items: center;justify-content: center;color: red;">已认证</text>
						</view>
						<view class="surface">
							<view>{{lang.positive}}</view>
							<view>{{lang.reverse}}</view>
						</view>
						<!-- 照片 -->
						<view>
							<view class="surface" >
								<view @tap="upload">
									<image :src="zhengmian" mode=""></image>
								</view>
								<view  @tap="upload1">
									<image  :src="fanmian" mode=""></image>
								</view>
							</view>
                            
							<view class="surfaceimg">
								<view>
									<image @tap="upload" src="../../../static/assert/tianjia.png" mode=""></image>
								</view>
								<view>
									<image @tap="upload1" src="../../../static/assert/tianjia.png" mode=""></image>
								</view>
							</view>
						</view>
						<!-- 手持身份证照片 -->
						<!-- <view class="handheld">
							<view>{{lang.photo}}</view>
							<view>
								<image :src="shouchi" mode=""></image>
							</view>
							<view>
								<image @tap="upload2" src="../../../static/assert/tianjia.png" mode=""></image>
							</view>
							<view>{{lang.visible}}
							</view>
						</view> -->
						<!-- 提交 -->
						<view class="pupickButtom">
                            
                            <p>(提交成功后，将返回首页)</p>
							<button @tap="uploadEd">{{lang.submit}}</button>
						</view>

					</view>
				</swiper-item>
				


			</swiper>
		</view>

		
		
	</view>
</template>
 
<script>
	import request from '@/utils/request';
	import {toast} from '@/utils/toast';
	import { mapState, mapMutations } from 'vuex';
	export default {
		data() {
			return {
				risk:true,
				whole: true,
				identityTd: true,
				severe: [], //查看认证后的信息一级
				idCard: "", //证件号
				name: "", //名字
				title: 'picker',
				array: [],
				array1: ['身份证','护照', '驾照'],
				index: "238",
				index1: '0',
				recognize: true,
				theIcd: false,
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				current: 0,
				listCountry: "",
				countryId: '4176', 
				card:"0",//身份认证id
				picList:[],
				imgurl:"",
				picture:"",
				imgurlImg:"",
				front:"",//照片前面
                back:"",//背面
                hand:"",//手持
				Risk:true,
                zhengmian:"../../../static/assert/shenfenzhengmian.png",
                fanmian:"../../../static/assert/fanmian.png",
                shouchi:"../../../static/assert/shouchi.png"
			}
		},
		onShow(){
			
			
		},
		computed: {
			...mapState('user', ['isLogin', 'userinfo']),
			...mapState(['lang']),
			swierHeight() {
				return uni.getSystemInfoSync().windowHeight;
			
			}
		},
		methods: {
            ...mapMutations('user', ['logout']),
			
			Riskbuy() {
				this.Risk = false;
			},
			bindLogin() {
				console.log(this.isLogin);
				if (this.isLogin) {
					this.logout();
					uni.switchTab({
						url: '/pages/quotation/main'
					})
				}
			},
			point(num) {
				this.recognize = false;
				this.theIcd = true;
				this.risk = false;
				this.current = num
			},
			// 点击下一步
			subpoint(num){
                console.log(this.index1)
    
				this.current = num
			},

			backone() {
				uni.switchTab({
					url: '../index'
				});
			},


			
			// 上传正面
            
			upload: function() {
                console.log('正面')
                var _this = this
				uni.chooseImage({
					count: 1,
					quality:80,
					sizeType: ['compressed'],				
					success: (chooseImageRes) => {					
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths[0])                      
						_this.zhengmian = tempFilePaths[0]
                        console.log(tempFilePaths[0],32132)
						debugger
						const uploadTask = uni.uploadFile({
							url: 'https://view.dupont-ex.com/KYApi/customers/setRenZhenImg', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'imgFile',
							formData:{
								'loginId':this.userinfo.Customer.loginId,
								'type':'front'
							},
							success: (uploadFileRes) => {													
								if(JSON.parse(uploadFileRes.data).ResultCD == "I001"){									 
										 toast("上传成功")
										 this.front = JSON.parse(uploadFileRes.data).ImgName
										 console.log(this.front,"正面")									   
									
								}else{
									toast(JSON.parse(uploadFileRes.data).ErrorMsg)
								}
								
								
							}
						});
					}
				});

			},
			// 反面
			upload1: function() {
                console.log("反面")
                var _this = this
				uni.chooseImage({
					count: 1,
					quality:80,
					sizeType: ['compressed'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
                        console.log(tempFilePaths,131313)
                        _this.fanmian = tempFilePaths[0]
						const uploadTask=uni.uploadFile({
							url: 'https://view.dupont-ex.com/KYApi/customers/setRenZhenImg', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'imgFile',
							formData:{
								'loginId':this.userinfo.Customer.loginId,
								'type':'back'
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data,131313);							
								if(JSON.parse(uploadFileRes.data).ResultCD == "I001"){
									toast("上传成功")
									this.back = JSON.parse(uploadFileRes.data).ImgName
									console.log(this.back,321321)
								}else{
									toast(JSON.parse(uploadFileRes.data).ErrorMsg)
								}
								
								
							}
						});
					}
				});
			
			},
			// 手持身份证
			// upload2: function() {
   //               var _this = this
			// 	uni.chooseImage({
			// 		sizeType: ['compressed'],
			// 		count: 1,
			// 		quality:80,
			// 		success: (chooseImageRes) => {
			// 			const tempFilePaths = chooseImageRes.tempFilePaths;
   //                      _this.shouchi = tempFilePaths[0]
			// 			const uploadTask=uni.uploadFile({
			// 				url: 'https://view.dupont-ex.com/KYApi/customers/setRenZhenImg', //仅为示例，非真实的接口地址
			// 				filePath: tempFilePaths[0],
			// 				name: 'imgFile',
			// 				formData:{
			// 					'loginId':'1',
			// 					'type':'hand'
			// 				},
			// 				success: (uploadFileRes) => {
			// 					// console.log(typeof(uploadFileRes.data));							
			// 					if(JSON.parse(uploadFileRes.data).ResultCD == "I001"){
			// 						toast("上传成功")
			// 						this.hand = JSON.parse(uploadFileRes.data).ImgName
			// 						console.log(this.hand,"手持")
			// 					}else{
			// 						toast(JSON.parse(uploadFileRes.data).ErrorMsg)
			// 					}
								
								
			// 				}
			// 			});
			// 		}
			// 	});
			
			// },
			// 提交
			uploadEd(){
				if(this.front==""){
					toast("请上传正面照")
				}else if(this.back == ""){
					toast("请上传反面照")
				}else{
					uni.switchTab({
						url:"pages/mein/index"
					})
				}
			},
			// 身份认证提交接口
			// uploadEd() {
   //              let data = {
			// 			token: this.userinfo.token,
			// 			idCard: this.idCard, 
			// 			credentialsType: this.card,
			// 			name: this.name,
			// 			countryId: this.countryId,
			// 			front: this.front.file1Url,
   //                      backend: this.backend.file2Url,
   //                      hand: this.hand.file3Url,
			// 		}               
			// 	request('/app/idCard/authentication', 'POST', data)
			// 		.then(res => {
			// 			console.log(res.data);
			// 			if(res.data.code==200){
			// 				toast("提交成功")
   //                           this.userinfo.authorizeLevel = 2
			// 					  uni.setStorage({
			// 					  key:"userinfo",
			// 					  data:res.data.data
			// 					  }),
			// 					uni.switchTab({
			// 						url:'../index'
			// 					})										
			// 				  console.log( this.userinfo.authorizeLeve,"身份证号码")
			// 			}else{
			// 				toast(res.data.msg);
			// 			}					
			// 		})			
			// },
		}
	}
</script>

<style scoped lang="scss">
	@import './common.scss';

	/deep/.uni-input {
		height: 21upx;
		padding: 0upx;
	}

	.top .time-line-row {
		margin-top: 40upx;
		display: flex;
		justify-content: space-between;
		padding: 0 220upx;
		align-items: center;
		justify-content: center;
	}

	.certification-list {
		padding: 0 30upx;
		margin-top: -140upx;

		// 身份认证
		.swiper-item {
			width: 80%;
			margin: 0 auto;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0upx 9upx 18upx 0upx rgba(64, 64, 112, 0.13);
			border-radius: 10upx;
			border: 1upx solid rgba(255, 255, 255, 1);
			padding-bottom: 54upx;

			// 信息认证
			&>view:nth-child(1) {
				font-size: 28upx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				color: rgba(45, 47, 86, 1);
				text-align: center;
				margin-top: 37upx;
			}

			// 国家
			.countries {
				display: flex;
				padding: 0 24upx;

				&>view:nth-child(1)>view {
					width: 28upx;
					height: 28upx;
					border-radius: 50%;
					margin-top: 66upx;
				}

				&>view:nth-child(2) {
					font-size: 24upx;
					font-family: PingFang-SC-Regular;
					font-weight: 400;
					color: rgba(45, 47, 86, 1);
					margin-left: 22upx;
					margin-top: 60upx;
				}
			}

			.choose {
				display: flex;
				padding: 0 24upx;

				&>view:nth-child(1) {
					width: 2upx;
					height: 110upx;
					border: 2upx dashed rgba(221, 221, 234, 1);
					margin-left: 10upx;
				}

				&>view:nth-child(2) {
					font-size: 24upx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					color: rgba(186, 197, 203, 1);
					margin-left: 35upx;
				}

				.region {
					width: 82%;
					height: 100%;
					padding-top: 17upx;
					padding-bottom: 17upx;
					border-bottom: 2upx solid #F0F0FA;
					margin-left: 35upx;
					display: flex;
					justify-content: space-between;

					&>view:nth-child(1) {
						font-size: 24upx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						color: rgba(186, 197, 203, 1);
					}

					&>view:nth-child(2) image {
						width: 11upx;
						height: 26upx;
					}

				}
			}

			// 姓名
			.name {
				display: flex;
				padding: 0 24upx;

				&>view:nth-child(1) {
					width: 28upx;
					height: 28upx;
					background: #6B87FF;
					border-radius: 50%;
					margin-top: 20upx;
				}

				&>view:nth-child(2) {
					font-size: 24upx;
					font-family: PingFang-SC-Regular;
					font-weight: 400;
					color: rgba(45, 47, 86, 1);
					margin-left: 22upx;
					margin-top: 12upx;
				}
			}

			// 提交
			.pupickButtom button {
				width: 80%;
				height: 80upx;
				margin: 0 auto;
				background: #DDDDEA;
				border-radius: 10upx;
                margin-top: 92upx;
				font-size: 32upx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				border:none !important;
			}
		}

		// 身份认证上传图片
		.swiper-itemId {
			width: 80%;
			margin: 0 auto;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0upx 9upx 18upx 0upx rgba(64, 64, 112, 0.13);
			border-radius: 10upx;
			border: 1upx solid rgba(255, 255, 255, 1);
			padding-bottom: 54upx;

			&>view:nth-child(1) {
				font-size: 28upx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				color: rgba(45, 47, 86, 1);
				text-align: center;
				margin-top: 37upx;
			}

			// 正面反面
			.surface {
				display: flex;
				justify-content: space-around;

				&>view {
					font-size: 21upx;
					font-family: PingFang-SC-Regular;
					font-weight: 400;
					color: rgba(45, 47, 86, 1);
					margin-top: 54upx;

					image {
						width: 200upx;
						height: 136upx;
						margin-top: -20upx;
						position: relative;
					}

				}

			}

			.surfaceimg {
				display: flex;
				justify-content: space-around;

				image {
					width: 70upx;
					height: 70upx;
					position: relative;
					top: -115px;
				}
			}

			// 手持身份证
			.handheld {
				&>view:nth-child(1) {
					font-size: 21upx;
					font-family: PingFang-SC-Regular;
					font-weight: 400;
					color: rgba(45, 47, 86, 1);
					text-align: center;
					margin-top: -20upx;
				}

				&>view:nth-child(2) image {
					width: 426upx;
					height: 248upx;
					margin: 0 auto;
					display: flex;
					position: relative;
				}

				&>view:nth-child(3) image {
					width: 70upx;
					height: 70upx;
					position: relative;
					top: -115px;
					margin: 0 auto;
					display: flex;
				}

				&>view:nth-child(4) {
					width: 372upx;
					height: 88upx;
					font-size: 22upx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					color: rgba(186, 197, 203, 1);
					margin-top: 46upx;
					text-align: center;
					margin: 0 auto;
				}
			}

			// 提交
            .pupickButtom p {
                margin-top: 92upx;
                text-align: center;
                font-size: 14upx;
            }
			.pupickButtom button {
				width: 80%;
				height: 80upx;
				margin: 0 auto;
				background: linear-gradient(-90deg, rgba(104, 129, 255, 1), rgba(115, 156, 255, 1));
				border-radius: 10upx;
				
				font-size: 32upx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}
		}

		.certification-li {
			font-size: 0;

			&>.card {
				&>view:first-child {
					display: flex;
					align-items: center;

					.level-info {
						margin-left: 29upx;
					}
				}

				&>view:last-child {
					text {
						display: inline-block;
						text-align: center;
						font-size: 24px;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
						background-color: #DDDDEA;
						border-radius: 20px;
						line-height: 40upx;
						width: 114px;
						height: 40px;
					}
				}

				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 46upx;
				padding-right: 84upx;
				box-shadow: 0px 9px 18px 0px rgba(64, 64, 112, 0.13);
				border-radius: 10px;
				background-color: #F6F6F6;
				height: 178upx;
				margin-bottom: 86upx;

				.card-icon {
					width: 57upx;
					height: 48upx;
					vertical-align: middle;
				}

			}

			&>image {
				width: 73upx;
				height: 37upx;
			}
		}

		.certification-li.actived {
			&>.card {
				height: 194upx;
				margin-bottom: 56upx;
				background-color: #FFFFFF;

				.card-icon {
					width: 62upx;
					height: 62upx;
					vertical-align: middle;
				}

				&>view:last-child {
					text {
						font-size: 24px;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);

						background: linear-gradient(51deg, rgba(249, 151, 39, 1), rgba(250, 210, 91, 1));
						border-radius: 20px;
						height: 40px;
						line-height: 40upx;
						padding: 0 10upx;
					}
				}
			}

		}
	}

	/deep/uni-swiper .uni-swiper-wrapper {
		overflow: hidden;
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
	//风险说明
	.statement {
		.modal {
			display: block;
			/* 默认隐藏 */
			/*生成绝对定位的元素，相对于浏览器窗口进行定位。*/
			position: fixed;
			z-index: 999;
			left: 0;
			top: 0;
			/*设置弹窗位置*/
			padding-top: 60%;
			padding-bottom: 100upx;
			/*浮在全屏上*/
			width: 100%;
			height: 100%;
			z-index: 99999;
			background-color: rgb(0, 0, 0);
			background-color: rgba(0, 0, 0, 0.5);
			/* 弹窗内容 */
	
			.modal-content {
				/*弹窗背景色设置*/
				background-color: #fefefe;
				margin: auto;
				width: 70%;
				background: rgba(255, 255, 255, 1);
				border-radius: 10upx;
				padding-bottom: 30upx;
				position: relative;
				padding: 0 30upx 30upx;
	
				.loss {
					padding-top: 46upx;
					padding-bottom: 29upx;
					border-bottom: 1upx solid #f1f1f1;
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(45, 47, 86, 1);
					text-align: center;
					margin: 0 auto;
				}
				& > view:nth-child(2) {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(45, 47, 86, 1);
					margin-top: 40upx;
				}
				// 确定
				.login {
					margin-top: 53upx;
	
					button {
						height: 74upx;
						background: linear-gradient(-90deg, rgba(104, 129, 255, 1), rgba(115, 156, 255, 1));
						border-radius: 10upx;
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}
				}
			}
		}
	}
	.Setupthe-one button {
		width: 92%;
		height: 80upx;
		margin: 0 auto;
		background: linear-gradient(-90deg, rgba(104, 129, 255, 1), rgba(115, 156, 255, 1));
		border-radius: 10upx;
		position: absolute;
		bottom: 89upx;
		font-size: 32upx;
		font-family: PingFang-SC-Regular;
		font-weight: 400;
		color: rgba(254, 254, 255, 1);
		margin-left: 30upx;
	}
</style>
